<template>
  <view class="cc-toast-container" v-if="isShowCom">
    <view class="toast-content" :style="{opacity: isShow ? '1' : '0'}">
      {{toastText}}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShow: false,
        showCount: 0,
        isFinished_AnimationQuery: true,
        toastText: "",
        toastTextArr: [],
        isShowCom: false
      }
    },
    methods: {
      show: function({
        toastText
      }) {
        this.isShowCom = true
        // 每次调用展示次数 + 1
        this.showCount++;
        this.toastTextArr.push(toastText)
        // 动画开始
        if (this.isFinished_AnimationQuery) {
          this.isFinished_AnimationQuery = false;
          // 出现动画
          setTimeout(() => {
            this.toastAnimation()
          }, 1)
        }
      },
      // 动画函数
      toastAnimation() {
        this.showCount--;
        this.toastText = this.toastTextArr.shift()
        this.isShow = true;
        setTimeout(() => {
          setTimeout(() => {
            // 延时 2s 出现消失动画
            this.isShow = false;
            setTimeout(() => {
              // 动画完成
              // 是否有后续动画
              if (this.showCount > 0) {
                // 展示次数 - 1
                this.toastAnimation()
              } else {
                // 全部动画处理结束，
                this.isFinished_AnimationQuery = true
                this.showCount = 0,
                  this.isShowCom = false
              }
            }, 500)
          }, 2000);
        }, 500);
      }
    }
  }
</script>

<style lang="scss">
  .cc-toast-container {
    .toast-content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      width: 300rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      background-color: #000;
      font-size: 32rpx;
      color: #FFF;
      border-radius: 26rpx;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
  }
</style>